<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-01-05 17:51:59
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-08-10 14:33:36
 * @Description:
 *
-->

<template>
  <div class="create-confirm">
    <div class="left">
      <div class="title">基础配置</div>
      <div class="content">
        <div class="item">
          <div class="subtitle">主机名称</div>
          <div class="subcontent">{{ basic.vmName }}</div>
        </div>
        <div v-if="basic.chargeType" class="item">
          <div class="subtitle">计费模式</div>
          <div class="subcontent">
            {{
              basic.chargeType +
                (basic.chargePeriod ? " | " + basic.chargePeriod : "")
            }}
          </div>
        </div>
        <div class="item">
          <div class="subtitle">镜像</div>
          <div class="subcontent">{{ basic.imageDetail }}</div>
        </div>
        <div v-if="basic.regionDesc" class="item">
          <div class="subtitle">区域</div>
          <div class="subcontent">{{ basic.regionDesc }}</div>
        </div>
        <div class="item">
          <div class="subtitle">可用区</div>
          <div class="subcontent">{{ basic.zoneText || basic.zone }}</div>
        </div>
        <div class="item">
          <div class="subtitle">系统盘大小</div>
          <div class="subcontent">{{ basic.sysDiskSize }} GB</div>
        </div>
        <div class="item" style="width: 100%">
          <div class="subtitle">规格</div>
          <div class="subcontent">{{ basic.flavorDetail }}</div>
        </div>
      </div>
      <div class="title">网络配置</div>
      <div class="content">
        <div class="item">
          <div class="subtitle">虚拟网络</div>
          <div class="subcontent">{{ network.networkName }}</div>
        </div>
        <div class="item">
          <div class="subtitle">子网</div>
          <div class="subcontent">{{ network.subnetName }}</div>
        </div>
        <div class="item">
          <div class="subtitle">安全组</div>
          <div class="subcontent">{{ network.nsgName }}</div>
        </div>
        <template v-if="basic.cloudProvider === '阿里云'">
          <div class="item">
            <div class="subtitle">公网IP</div>
            <div class="subcontent">
              {{ network.publicIp ? "分配公网IPv4地址" : "不分配公网IPv4地址" }}
            </div>
          </div>
          <template v-if="network.publicIp">
            <div class="item">
              <div class="subtitle">带宽计费模式</div>
              <div class="subcontent">{{ network.internetChargeType }}</div>
            </div>
            <div class="item">
              <div class="subtitle">
                {{
                  network.internetChargeType === "按固定带宽计费"
                    ? "带宽大小"
                    : "带宽峰值"
                }}
              </div>
              <div class="subcontent">
                {{ network.internetMaxBandwidthOut }} M
              </div>
            </div>
          </template>
        </template>
      </div>
      <div class="title">高级配置</div>
      <div class="content">
        <div class="item">
          <div class="subtitle">登录密码</div>
          <div class="subcontent">{{ high.loginPwd }}</div>
        </div>
        <div class="item">
          <div class="subtitle">标签</div>
          <div class="subcontent">{{ getHighVmTags() }}</div>
        </div>
      </div>
    </div>
    <div v-if="basic.isCloudPublic" class="right">
      <div class="title">预估费用</div>
      <el-row
        v-if="basic.cloudProvider === '阿里云'"
        v-loading="loadingPrice"
        class="content"
        style="min-height: 100px"
      >
        <template v-if="priceData">
          <div class="item instancePrice">
            <div class="text">实例</div>
            <div class="price">￥{{ instancePriceText }}</div>
          </div>
          <div class="item systemDiskPrice">
            <div class="text">系统盘</div>
            <div class="price">￥{{ systemDiskPriceText }}</div>
          </div>
          <div v-if="network.publicIp" class="item internetPrice">
            <div class="text">
              {{
                priceData.internetPriceType === "Usage" ? "公网流量" : "带宽"
              }}
            </div>
            <div class="price">￥{{ internetPriceText }}</div>
          </div>
          <div class="total">
            <div class="line"></div>
            <div class="item">
              <div class="text">
                {{
                  priceData.internetPriceType === "Usage" ? "配置费用" : "合计"
                }}
              </div>
              <div class="price">￥{{ totalPriceText }}</div>
            </div>
            <div v-if="priceData.internetPriceType === 'Usage'" class="item">
              <div class="text">公网流量</div>
              <div class="price">￥{{ internetPriceText }}</div>
            </div>
          </div>
        </template>
      </el-row>
      <el-row
        v-if="basic.cloudProvider === '华为云'"
        v-loading="loadingPrice"
        class="content"
        style="min-height: 100px"
      >
        <template v-if="priceData">
          <div class="item instancePrice">
            <div class="text">实例</div>
            <div class="price">￥{{ instancePriceText }}</div>
          </div>
          <div class="item systemDiskPrice">
            <div class="text">系统盘</div>
            <div class="price">￥{{ systemDiskPriceText }}</div>
          </div>
          <div class="total">
            <div class="line"></div>
            <div class="item">
              <div class="text">合计</div>
              <div class="price">￥{{ totalPriceText }}</div>
            </div>
          </div>
        </template>
      </el-row>
    </div>
  </div>
</template>

<script>
import { priceVM } from '@/api/cn-resource'

const PRICE_UNIT = {
  hour: '时',
  month: '月',
  year: '年'
}

export default {
  name: 'CreateConfirm',
  components: {},
  props: {
    basic: {
      type: Object,
      default: () => {}
    },
    network: {
      type: Object,
      default: () => {}
    },
    high: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loadingPrice: false,
      priceData: null
    }
  },
  computed: {
    /**
     * @description: 合计价格
     * @return {*}
     */
    totalPriceText() {
      if (this.priceData) {
        let unitText = ''
        if (this.priceData.internetPriceType === 'Usage') {
          if (this.priceData.instancePriceType) {
            unitText =
              ' /' +
              (Object.prototype.hasOwnProperty.call(
                PRICE_UNIT,
                this.priceData.instancePriceType.toLowerCase()
              )
                ? PRICE_UNIT[this.priceData.instancePriceType.toLowerCase()]
                : this.priceData.instancePriceType)
          }
          const price =
            Number(this.priceData.instancePrice) +
            Number(this.priceData.systemDiskPrice)
          const precision = Math.max(
            this.getPrecision(this.priceData.instancePrice),
            this.getPrecision(this.priceData.systemDiskPrice)
          )
          return price.toFixed(precision) + unitText
        } else {
          if (this.priceData.instancePriceType) {
            unitText =
              ' /' +
              (Object.prototype.hasOwnProperty.call(
                PRICE_UNIT,
                this.priceData.instancePriceType.toLowerCase()
              )
                ? PRICE_UNIT[this.priceData.instancePriceType.toLowerCase()]
                : this.priceData.instancePriceType)
          }
          const price =
            Number(this.priceData.instancePrice) +
            Number(this.priceData.systemDiskPrice) +
            Number(this.priceData.internetPrice || 0)
          const precision = Math.max(
            this.getPrecision(this.priceData.instancePrice),
            this.getPrecision(this.priceData.systemDiskPrice),
            this.getPrecision(this.priceData.internetPrice)
          )
          return price.toFixed(precision) + unitText
        }
      }
      return ''
    },
    /**
     * @description: 实例价格
     * @return {*}
     */
    instancePriceText() {
      if (this.priceData) {
        let unitText = ''
        if (this.priceData.instancePriceType) {
          unitText =
            ' /' +
            (Object.prototype.hasOwnProperty.call(
              PRICE_UNIT,
              this.priceData.instancePriceType.toLowerCase()
            )
              ? PRICE_UNIT[this.priceData.instancePriceType.toLowerCase()]
              : this.priceData.instancePriceType)
        }
        return this.priceData.instancePrice + unitText
      }
      return ''
    },
    /**
     * @description: 系统盘价格
     * @return {*}
     */
    systemDiskPriceText() {
      if (this.priceData) {
        let unitText = ''
        if (this.priceData.systemDiskPriceType) {
          unitText =
            ' /' +
            (Object.prototype.hasOwnProperty.call(
              PRICE_UNIT,
              this.priceData.systemDiskPriceType.toLowerCase()
            )
              ? PRICE_UNIT[this.priceData.systemDiskPriceType.toLowerCase()]
              : this.priceData.systemDiskPriceType)
        }
        return this.priceData.systemDiskPrice + unitText
      }
      return ''
    },
    /**
     * @description: 带宽价格
     * @return {*}
     */
    internetPriceText() {
      if (this.priceData) {
        let unitText = ''
        if (this.priceData.internetPriceType) {
          if (this.priceData.internetPriceType === 'Usage') {
            unitText = ' /' + this.priceData.internetPriceUnit
          } else {
            unitText =
              ' /' +
              (Object.prototype.hasOwnProperty.call(
                PRICE_UNIT,
                this.priceData.internetPriceType.toLowerCase()
              )
                ? PRICE_UNIT[this.priceData.internetPriceType.toLowerCase()]
                : this.priceData.internetPriceType)
          }
        }
        return (this.priceData.internetPrice || '') + unitText
      }
      return ''
    }
  },
  watch: {},
  created() {
    if (this.basic.isCloudPublic) {
      this.getPriceVM()
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: 获取精度
     * @param {*} num
     * @return {*}
     */
    getPrecision(num) {
      const arr = String(num).split('.')
      if (arr.length > 1) {
        return arr[1].length
      }
      return 0
    },
    /**
     * @description: 预估费用
     * @return {*}
     */
    getPriceVM() {
      this.loadingPrice = true
      priceVM({
        chargeType: this.basic.chargeType,
        cloudAccountName: this.basic.cloudAccountName,
        cloudProvider: this.basic.cloudProvider,
        cpRegionId: this.basic.cpRegionId,
        flavorId: this.basic.flavorId,
        imageId: this.basic.imageId,
        internetChargeType: this.network.internetChargeType,
        internetMaxBandwidthOut: this.network.internetMaxBandwidthOut,
        num: this.high.num,
        period: this.basic.period,
        periodUnit: this.basic.periodUnit,
        publicIp: this.network.publicIp,
        sysDiskSize: this.basic.sysDiskSize,
        sysDiskType: this.basic.sysDiskType
      })
        .then((res) => {
          this.priceData = res.data
        })
        .finally(() => {
          this.loadingPrice = false
        })
    },
    /**
     * @description: 标签数组转为字符
     * @return {*}
     */
    getHighVmTags() {
      let text = ''
      if (Array.isArray(this.high.vmTags)) {
        text = this.high.vmTags.reduce((prev, cur, index) => {
          // 通过reduce拼接
          return prev + (index === 0 ? '' : ' / ') + cur.key + ':' + cur.value
        }, '')
      }
      return text
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.create-confirm {
  display: flex;
  .left {
    flex: 1;
    .title {
      height: 32px;
      background: #f7f7f7;
      .textStyle(14px , 600, #262626);
      line-height: 32px;
      padding-left: 20px;
      margin-bottom: 10px;
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-left: 20px;
      margin-bottom: 15px;
      .item {
        width: 33.3%;
        height: 30px;
        display: flex;
        align-items: center;
        .subtitle {
          min-width: 56px;
          .textStyle(14px , 400, #C3C3C3);
          line-height: 20px;
          text-align: right;
          margin-right: 10px;
        }
        .subcontent {
          .textStyle(14px , 500, #4a4a4a);
          line-height: 20px;
        }
      }
    }
  }
  .right {
    width: 220px;
    margin-left: 20px;
    border-radius: 1px;
    border: 1px solid #ececec;
    display: flex;
    flex-direction: column;
    .title {
      height: 32px;
      background: #f7f7f7;
      border-bottom: 1px solid #ececec;
      .textStyle(14px , 600, #262626);
      line-height: 32px;
      padding-left: 20px;
      margin-bottom: 10px;
    }
    .content {
      flex: 1;
      position: relative;
      .item {
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        padding: 10px 20px 0;

        .text {
          .textStyle(14px , 400, #C3C3C3);
          line-height: 20px;
          min-width: 42px;
          text-align: right;
        }
        .price {
          .textStyle(14px , 400, #4a4a4a);
          line-height: 20px;
          margin-left: auto;
        }
      }
      .total {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        .item .text {
          color: #0091ff;
        }
        .item .price {
          color: #0091ff;
        }
        .line {
          height: 1px;
          background-color: #f2f2f2;
        }
      }
    }
  }
}
</style>
